


function $(el){
    return document.querySelector(el)
};
function gets(el){
    return [...document.querySelectorAll(el)]
}

let pices = [
    "./img/sma1.jpg",
    "./img/sma2.jpg",
    "./img/sma3.jpg",
    "./img/sma4.jpg",
    "./img/sma5.jpg",
    "./img/sma6.jpg",
    "./img/sma7.jpg",
    "./img/sma8.jpg",
    "./img/sma9.jpg",
    "./img/sma10.jpg",
];

let wrap = $('.wrap'),
    wrap_up = $('.wrap_up'),
    big_box = $('.big_box'),
    mark = $('.mark'),
    next = $('.icon-you'),
    ul = $('#imglist'),
    prev = $('.icon-zuo');
    
    
ul.innerHTML = pices.map((src) =>{
    return `<li><img src="${src}" alt=""></li>`
}).join('')
let list = gets('#imglist li'),
    dis = -(list.length - 5)*55;
list[0].classList.add('active')
ul.style.width = pices.length*55 +'px'
if(list.length > 5) next.classList.add('ok')
ul.addEventListener('mouseover',(e) =>{
    let target = e.target ;
    if(target.nodeName === 'IMG' && target.parentNode.nodeName ==='LI'){
        let li = target.parentNode,
            index = list.indexOf(li),
            active = $('.active');
            active && active.classList.remove('active');
            li.classList.add('active');
        wrap_up.firstElementChild.src = `./img/pic${index}.jpg`;
        big_box.firstElementChild.src = `./img/pic${index}.jpg`;
    }
});
$('.wrap_down').addEventListener('click',(e)=> {
    let target = e.target;
     if(target.nodeName === 'I' && target.classList.contains('icon-you')){
        if(!next.classList.contains('ok')) return;
        ul.style.left = dis +'px' ;
        next.classList.remove('ok');
        prev.classList.add('ok')
    }else if(target.nodeName === 'I' && target.classList.contains('icon-zuo')){
        ul.style.left = 0 +'px' ;
        prev.classList.remove('ok');
        next.classList.add('ok')
    }
})

wrap_up.addEventListener('mousemove',(e)=>{
       let l = e.clientX - wrap_up.offsetLeft - mark.offsetWidth/2,
           t = e.clientY - wrap_up.offsetTop - mark.offsetHeight/2,
           maxW = wrap_up.offsetWidth -mark.offsetWidth,
           maxH = wrap_up.offsetHeight - mark.offsetHeight,
           p = big_box.firstElementChild.offsetWidth/wrap_up.offsetWidth;
          
    if(l < 0) l = 0;
    if(t < 0) t = 0;
    if(l > maxW) l = maxW;
    if(t > maxH) t = maxH;
    mark.style.left = l + 'px';
    mark.style.top = t +'px';
    let b_img = big_box.firstElementChild,
    bl = -p*l,
    bt = -p*t ;
    b_img.style.left = bl + 'px';
    b_img.style.top = bt + 'px';
    console.log(p)
});

   

